<template>
  <div class="r1">

    <!-- <h1>企业管理</h1> -->
    <div class="q1">
      <span class="q2">超级企业列表</span>
      <input type="text" class="q4" v-model="input7">
      <button class="q5" @click="ss()"><i class="el-icon-plus"></i></button>

      <div class="q3">
        <ul class="w1" v-for="item in arr" :key="item.id">
          <li class="w2"><span class="w3" @click="ff(item)">{{ item.ename }} ({{ item.status }})
          </span></li>
        </ul>
      </div>
    </div>

    <div class="w4">
      <ul class="r2">

        <li><router-link :to="{ path : '/shou/qiy/cjqygl'}" @click.native="handleClicko">超级企业管理</router-link></li>
        
        <li><router-link to="/shou/qiy/zqygl" @click.native="handleClick">子企业管理</router-link></li>
      </ul>
      
      <router-view></router-view>
      
      <div class="t1">
        <span class="t2">超级企业信息</span>
        
        <span class="y9">当前超级企业为 {{ nan.status == 1 ? '启用' : '停用' }} 状态</span>
        <span class="t18" @click="geng(nan.id)">点击停用或获启用</span>


        <i class="el-icon-edit" @click="tj()"></i>
        <span class="t3">超级企业名称</span>
        <span class="t4">企业域名</span>
        <span class="t5">超级管理员账号</span>
        <span class="t6">邮箱</span>
        <span class="t7">超级企业ID</span>
        <span class="t8">最大坐席数</span>
        <span class="t9">最大登录并发总数</span>
        <span class="t10">创建时间 175155676</span>

        <span class="t11">{{ nan.ename }}</span>
        <span class="t12">{{ nan.ipstr }}</span>
        <span class="t13">{{ nan.adminname }}</span>
        <span class="t14">{{ nan.adminemil }}</span>
        <span class="t15">{{ nan.id }}</span>
        <span class="t16">{{ nan.maxnum }}</span>
        <span class="t17">{{ nan.maxconcurrency }}</span>
      </div>

     <div class="mask" id="mask"></div>
   <!-- 弹出框内容 -->
   <div class="popup" id="popup">
    <span class="y1">新增超级企业</span>
    <hr>
    <span class="y2">超级企业名称 &emsp13;&emsp13;<input type="text" v-model="input1"></span>
    <span class="y3">企业域名 &emsp13;&emsp13;<input type="text" v-model="input2"></span>
    <span class="y4">超级管理员账号 &emsp13;&emsp13;<input type="text" v-model="input3"></span>
    <span class="y5">邮箱 &emsp13;&emsp13;<input type="text" v-model="input4"></span>
    <span class="y6">最大座席数 &emsp13;&emsp13;<input type="text" v-model="input5"></span>
    <span class="y7">最大并发数 &emsp13;&emsp13;<input type="text" v-model="input6"></span>
    <el-button type="primary" class="y8" @click="bao()">保存</el-button>
  </div>
      
    </div>

  </div>
</template>

<script>
import {chaojiqy , chaojiqyadd , chaojiqysol ,chaojiqytai } from '@/utlis/https'

export default {
  data() {
    return {
      arr:[],

      nan:'',

      // 添加
      input1:'',
      input2:'',
      input3:'',
      input4:'',
      input5:'',
      input6:'',


      // 搜索
      input7:'',


    }
  },
  // 获取超级企业列表
  mounted() {
    chaojiqy()
    .then((val) =>{
      console.log(val);
      this.arr = val.data.data 
    })
    .catch((e) =>{
      console.log(e);
    })
  },
  methods: {
    // 点击那个渲染那个
    ff(item){
      this.nan = item
      // console.log(item);
      // console.log(this.nan);
      
      
    },

    handleClick(){
      document.querySelector('.t1').style="display:none"
    },
    handleClicko(){
      document.querySelector('.t1').style="display:black"
    },

  
    // 添加
    tj () {
      document.getElementById('mask').style.display = 'block';
      document.getElementById('popup').style.display = 'block';
    },
    bao(){
      chaojiqyadd({
        ename:this.input1,
        ipstr:this.input2,
        adminname:this.input3,
        adminemil:this.input4,
        maxnum:this.input5,
        maxconcurrency:this.input6
      })
    .then((val) =>{
      console.log(val);
      document.getElementById('mask').style.display = 'none';
      document.getElementById('popup').style.display = 'none';
    })
    .catch((e) =>{
      console.log(e);
    })
    },

    // 搜索
    ss(){
       chaojiqysol(this.input7)
    .then((val) =>{
      console.log(val);
      this.arr = val.data.data
    })
    .catch((e) =>{
      console.log(e);
    })
    },

    // 更改状态
    geng(id){
  var a = this.arr.find(item=>item.id == id)

      chaojiqytai({
      id:a.id,
      status:a.status
      })
      .then((val) =>{
        if(a.status == 1){
          a.status = 0
          // console.log(a.status);
        }else if(a.status == 0){
          a.status = 1
          // console.log(a.status);
        }
        console.log(val);
    })
    .catch((e) =>{
      console.log(e);
    })
    }

  },
  computed: {

  },
}
</script>
<style lang='less' scoped>
.q1{
    // border: 1px solid black;
    background-color: white;
    width: 300px;
    height: 660px;
    position: relative;
    bottom: 20px;
    display: inline-block;
}
.q2{
  position: absolute;
  left: 20px;
  font-size: 22px;
  top: 15px;
}
.q3{
  width: 300px;
  height: 530px;
  // background-color: aqua;
  position: relative;
  top: 136px;
  overflow-y: auto; /* 仅垂直方向自动滚动 */
  cursor: pointer;
}
.q4{
  width: 190px;
  height: 40px;
  position: absolute;
  top: 55px;
  border: rgb(163, 163, 187) 1px solid;
  left: 20px;
}
.q5{
  width: 40px;
  height: 40px;
  position: absolute;
  top: 56px;
  right: 20px;
  border: none;
  background-color:rgb(234,246,254);
}
.el-icon-plus{
  font-size: 30px;
  color: rgb(36,158,254);
  position: relative;
  right: 3px;
}
.w1 li {
  width: 280px;
  height: 70px;
  // background-color: aqua;
  border-bottom: 1px solid rgb(237,238,240);
  position: relative;
  right: 40px;
  list-style: none;
}
// .w2{
//   border: 1px solid rgb(237,238,240);
// }
.w3{
  position: absolute;
  left: 30px;
  top: 20px;
  color: rgb(152,157,178);
}
.w4{
  width: 950px;
  height: 600px;
  background-color: white;
  display: inline-block;
  position: absolute;
  left: 320px;
  top: 40px;
}
.r1{
  position: relative;
}
.r2 li {
  display: inline-block;
  width: 150px;
  height: 40px;
  // background-color: aqua;
  text-align: center;
  line-height: 40px;
  border: 1px solid rgb(223,223,223);
}
/* 精确匹配的链接会获得 router-link-exact-active 类 */
.router-link-exact-active{
  color: white;
  font-weight: bold;
  display: block;
  width: 150px;
  height: 40px;
  background-color: rgb(34,157,255);
}
.t1{
  // background-color: aqua;
  width: 900px;
  height: 300px;
  position: fixed;
  top: 380px;
  left: 550px;
  border: 1px solid rgb(241,242,243);
}
.t2{
  position: relative;
  top: 20px;
  left: 20px;
}
.t3{
  position: relative;
  top: 65px;
  color: rgb(157,163,185);
}
.t4{
  position: relative;
  top: 120px;
  right: 60px;
  color: rgb(157,163,185);
}
.t5{
  position: relative;
  top: 180px;
  right: 170px;
  color: rgb(157,163,185);
}
.t6{
  position: relative;
  top: 250px;
  right: 210px;
  color: rgb(157,163,185);
}
.t7{
  position: relative;
  top: 60px;
  left: 100px;
  color: rgb(157,163,185);
}
.t8{
  position: relative;
  top: 120px;
  left: 20px;
  color: rgb(157,163,185);
}
.t9{
  position: relative;
  top: 180px;
  right: 100px;
  color: rgb(157,163,185);
}
.t10{
  position: relative;
  top: 250px;
  right: 160px;
  color: rgb(157,163,185);
}
.t11{
  position: absolute;
  left: 250px;
  top: 60px;
}
.t12{
  position: absolute;
  left: 250px;
  top: 120px;
}
.t13{
  position: absolute;
  left: 250px;
  top: 180px;
}
.t14{
  position: absolute;
  bottom: 30px;
  left: 250px;
}
.t15{
  position: absolute;
  right: 250px;
  top: 60px;
}
.t16{
  position: absolute;
  right: 250px;
  top: 120px;
}
.t17{
  position: absolute;
  right: 250px;
  top: 180px;
}
.el-icon-edit{
  position: absolute;
  left: 150px;
  top: 23px;
  cursor: pointer
}
 /* 遮罩层样式 */
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明，实现周围变黑效果 */
      display: none; /* 默认隐藏 */
      z-index: 998; /* 保证在弹出框下方，又能覆盖页面其他内容 */
    }
    /* 弹出框样式 */
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      display: none; /* 默认隐藏 */
      z-index: 999; /* 保证在遮罩层上方 */
      width: 500px;
      height: 600px;
    }
    .y1{
      font-size: 18px;
    }
    .y2{
      position: absolute;
      top: 80px;
      left: 70px;
      color: rgb(147,163,172);
    }
    .y2 input{
      width: 260px;
      height: 35px;
      border: 1px solid rgb(222,224,231);
    }
    .y3{
      position: absolute;
      top: 160px;
      left: 103px;
      color: rgb(147,163,172);
    }
     .y3 input{
      width: 260px;
      height: 35px;
      border: 1px solid rgb(222,224,231);
    }
    .y4{
      position: absolute;
      top: 240px;
      left: 55px;
      color: rgb(147,163,172);
    }
     .y4 input{
      width: 260px;
      height: 35px;
      border: 1px solid rgb(222,224,231);
    }
    .y5{
      position: absolute;
      top: 320px;
      left: 135px;
      color: rgb(147,163,172);
    }
     .y5 input{
      width: 260px;
      height: 35px;
      border: 1px solid rgb(222,224,231);
    }
    .y6{
      position: absolute;
      top: 400px;
      left: 85px;
      color: rgb(147,163,172);
    }
     .y6 input{
      width: 260px;
      height: 35px;
      border: 1px solid rgb(222,224,231);
    }
     .y7{
      position: absolute;
      top: 480px;
      left: 85px;
      color: rgb(147,163,172);
    }
     .y7 input{
      width: 260px;
      height: 35px;
      border: 1px solid rgb(222,224,231);
    }
    .y8{
      position: absolute;
      top: 580px;
      left: 240px;
    }
    .t18{
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
      color: rgb(35,163,255);
    }
    .y9{
      position: absolute;
      left: 560px;
      top: 22px;
      font-size: 14px;
      color: rgb(147,172,199);
    }
</style>